<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
    <link rel="shortcut icon" href="statics/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="statics/css/c.css">

</head>
<body>
    <header class="header">
         <div class="bg" <a href="#"></a>></div>

         <div class="ag">
            <a href="#">了解更多|</a>
            <a href="#">反馈意见</a>
         </div>
    </header>

<section class="content">
    <header class="content-tit">
            <h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
    </header>
         <div class="mainBody-wp">
         <div class="mainBody">

         <div class="regTabs">
            <ul>
               <li><a href="#" style="font-weight:bold; color:#fff">注册字母邮箱</a></li>
               <li><a href="#">注册手机号码邮箱</a></li>
               <li><a href="#">注册VIP邮箱</a></li>
            </ul>
         </div>


         <div class="regForm">
            <dl class="regForm-item">
              <dt class="regForm-title">
                 <span class="txt-impt">*</span>邮件地址
              </dt>

              <dd class="regForm-item-ct">
                  <input type="text" class="ipt">
                  <strong style="font-weight:bold;font-size: 14px;">@</strong>
                  <select> 
                    <option selected="selected">126.com</option>
                    <option selected="selected">qq.com</option> 
                    <option selected="selected">163.com</option>
                  </select>
                  <div class="tip">
                      <span>6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
                  </div>
              </dd>
            </dl>

            <dl class="regForm-item">
              <dt class="regForm-title">
                 <span class="txt-impt">*</span>密码
              </dt>
              <dd class="regForm-item-ct">
              <input type="text" class="ipt" style="width:322px;">
                  <div class="tip">
                      <span>6~16个字符，区分大小写</span>
                  </div>
              </dd>
            </dl>

            <dl class="regForm-item">
              <dt class="regForm-title">
                 <span class="txt-impt">*</span>确认密码
              </dt>
              <dd class="regForm-item-ct">
              <input type="text" class="ipt" style="width:322px;">
                  <div class="tip">
                      <span>请再次填写密码</span>
                  </div>
              </dd>
            </dl>





             <dl class="regForm-item">
              <dt class="regForm-title">
                 <span class="txt-impt">*</span>手机号码

              </dt>
  

                <dd class="regForm-item-ct">
              <input id="ph" type="text" class="ipt" style="width:322px;font-size: 14px;font-weight: bold; padding-left: 40px;" value="+86">

               <div class="itl" style="width:35px;height:27px;line-height:27px;">

               <div class="flag flag-CN">
                    <em>&nbsp;</em>
                 
                  </div>
                
                  </div>

                <div class="tips">
                      <span>忘记密码时，可以通过该手机号快速找回</span>
                

              <div class="tilSelect" style="display:none">
                  <a href="#" class="flag-CN"><em></em>中国 +86</a>             

                  <a href="#" class="flag-DZ"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>

                  <a href="#" class="flag-AR"><em></em>阿根廷(Argentina) +54</a>

                  <a href="#" class="flag-AE"><em></em>阿拉伯联合大公国(The United Arab Emirates) +971</a>

                  <a href="#" class="flag-AW"><em></em>阿鲁巴(Aruba) +297</a>

                  <a href="#" class="flag-OM"><em></em>阿曼(Sultanate of Oman) +968</a>

                  <a href="#" class="flag-AZ"><em></em>阿塞拜疆(Azərbaycan) +994</a>

                  <a href="#" class="flag-EG"><em></em>埃及(The Arab Republic of Egypt) +20</a>

                  <a href="#" class="flag-ET"><em></em>埃塞俄比亚(Ityop'iya) +251</a>

                  <a href="#" class="flag-IE"><em></em>爱尔兰(Ireland) +353</a>

                   <a href="#" class="flag-BR"><em></em>巴西(Brasil) +55</a>

                    <a href="#" class="flag-KP"><em></em>朝鲜 +850</a>



              </div>
                  
              </dd>
              
           <dl class="regForm-item">
              <dt class="regForm-title">
                 <span class="txt-impt">*</span>验证码
              </dt>
              <dd class="regForm-item-ct">
              <input type="text" class="ipt" style="width:196px;position: relative;bottom:34px;">

               <img id="vcodeImg" class="vCode" style="cursor:pointer;" src="statics/images/call.do.jpg" alt="验证码" width="120" height="50">
                <div class="tip">
                      <span>请填写图片中的字符，不区分大小写</span>
                  </div>

                 

                  <a  href="javascript:void(0);" class="switchvCode" tabindex="-1">看不清楚？换张图片</a>

                  <a href="#"><strong>免费获取验证码</strong></a>
              </dd>
            </dl>
           
        </div>

         </div>





         <div class="mainBody-side">
         <div class="regExt">
           <img src="statics/images/reg_master.gif">
         </div>

         </div>
         </div>
</section>
  
<script type="text/javascript">
  function tilSelect(){
           var links=document.querySelectorAll('.tilSelect');

           for(i=0;i<links.length;i++){

            links[i].addEventListener('click',function(e){

              var a =e.target;

              var txt =a.innerText;

              var cls =a.className;

              var area=txt.substr(txt.indexOf("+"),txt.length -  txt.indexOf("+"));

              document.querySelector("#ph").setAttribute("value",area);

              var p =document.querySelector(".flag");
              p.className="flag "+cls;


            })
           }

  }
  function switchFlag(){

    var flag=document.querySelector(".itl");
    flag.addEventListener("click",function(e){
     /*是谁响应了点击事件*/
      var d=e.target;
      var panel=document.querySelector(".tilSelect");

      /*三元运算符。可以用if。。。else*/

      // panel.style.display==="none"?panel.style.display="block":panel.style.display="none"
      if( panel.style.display==="none"){
        panel.style.display="block"
      }else{
        panel.style.display="none"
    }

    });

    console.log(flag);
   }

  function switchTab(){

    var tabs = document.querySelectorAll('.regTabs ul li a');

    var ul=document.querySelector(".regTabs ul");

    for(i=0;i<tabs.length;i++){
      tabs[i].index=i;
       tabs[i].addEventListener('click',function(e){

         var item = e.target;

        console.log(item.index);

        ul.style.background= "url(statics/images/tab.jpg) 0 -"+item.index*55.5+"px";

        for (var j = 0; j < tabs.length; j++) {
         tabs[j].style.color="#000";
         tabs[j].style.fontWeight = "";
        }
        item.style.color="#fff";
        item.style.fontWeight = "bold";


    });
   }
  }

   tilSelect();
   switchFlag();
   switchTab();
</script>  	

</body>
</html>